<template>
  <div class="Store">
    <div class="content">
      <div class="search-box">
        <input type="text" name="" value="" placeholder="搜索">
      </div>
      <swiper-slide :ImgArray="ImgArray"></swiper-slide>
      <product-box-big :ProductB="ProductB"></product-box-big>
      <div class="sp">
        <h3>限时秒杀</h3>
      </div>
    </div>
      <footer-com></footer-com>
  </div>
</template>

<script>
import FooterCom from '../components/footer'
import SwiperSlide from '../components/SwiperSlide'
import ProductBoxBig from '../components/ProductBoxBig'
export default {
  components: {
    FooterCom,
    SwiperSlide,
    ProductBoxBig
  },
  data(){
    return {
      ImgArray: [
        {src: require("../assets/SlideImg/1.jpg")},
        {src: require("../assets/SlideImg/2.jpg")},
        {src: require("../assets/SlideImg/3.jpg")},
        {src: require("../assets/SlideImg/4.jpg")},
        {src: require("../assets/SlideImg/5.jpg")},
        {src: require("../assets/SlideImg/6.jpg")},
        {src: require("../assets/SlideImg/7.jpg")},
        {src: require("../assets/SlideImg/8.jpg")},
        {src: require("../assets/SlideImg/9.jpg")}
      ],
      ProductB: [
        {
          id: 1,
          src: require("../assets/logo.png"),
          title: "KATE/凯多 骨干重塑立体四色眼影盒 BR-4",
          price: 276,
        },
        {
          id: 2,
          src: require("../assets/logo.png"),
          title: "KATE/凯多 骨干重塑立体四色眼影盒 BR-4",
          price: 276,
        },
        {
          id: 3,
          src: require("../assets/logo.png"),
          title: "KATE/凯多 骨干重塑立体四色眼影盒 BR-4",
          price: 276,
        },
        {
          id: 4,
          src: require("../assets/logo.png"),
          title: "KATE/凯多 骨干重塑立体四色眼影盒 BR-4",
          price: 276,
        }
      ]
    }
  }
}
</script>

<style lang="css" scoped>
.Store{
  width: 100%;
  height: 100%;
}
.search-box{
  padding: 5px 10px;
}
.search-box input{
  background-color: #eee;
  border: 0px;
  border-radius: 5px;
  width: calc(100% - 20px);
  padding: 7px 3px;
}
.sp{
  background-image: url(../assets/sp-bg.jpg);
  background-size: cover;
  background-position: center;
  padding: 50px;
  margin: 10px 0px;
}
.sp h3{
  padding: 15px;
  background-color: rgba(255, 255, 255, 0.5);
  font-weight: 200;
  text-align: center;
}
.content{
  height: calc(100% - 53px);
  overflow: auto;
}
</style>
